<template>
<div>
  <tou/>
  <second/><br>
  <div style="width: 715px;background-color: #EEF1F8;margin: 10px auto;border: 1px solid #418CCD;display: flex">
    <el-descriptions title="列车信息（以下余票信息仅供参考）"  direction="vertical" :column="20" border>

      <template slot="extra">
        <el-button type="primary" size="small" @click="openModal">添加乘车人</el-button>
      </template>

      <el-descriptions-item label="出发时间">{{tableData.carStarttime}}</el-descriptions-item>
      <el-descriptions-item label="车次">{{tableData.carName}}</el-descriptions-item>
      <el-descriptions-item label="始发站" :span="2">{{tableData.carStartaddr}}</el-descriptions-item>
      <el-descriptions-item label="终点站" :span="2">{{tableData.carEndaddr}}</el-descriptions-item>
      <el-descriptions-item label="到站时间" :span="2">{{tableData.carEndtime}}</el-descriptions-item>
      <el-descriptions-item label="一等座" :span="2">{{tableData.first}}(￥{{tableData.carPrice}})</el-descriptions-item>
      <el-descriptions-item label="二等座">{{tableData.second}}(￥{{tableData.carPrice*0.8}})</el-descriptions-item>
      <el-descriptions-item label="无座">{{tableData.no}}(￥{{tableData.carPrice*0.8}})</el-descriptions-item>
    </el-descriptions>
  </div>
  <div style="width: 1000px;margin: 0 auto;height: 100px;background-color: #eee;border: 1px solid #3b99fc ">
    <h3 style="display: flex;padding-left: 20px;margin: 0 0 10px 0  ;background-color: #3b99fc;">乘车人</h3>
    <template>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="person in personList" :label="person">{{person.personName}}</el-checkbox>
      </el-checkbox-group>
    </template>
  </div>
  <div style="width: 1000px;margin: 0 auto;height: 30px;background-color: #5199FD;display: flex">
    <h3 style="margin: 0 0 0 5px">序号</h3>
    <h3 style="margin: 0 0 0 60px">票种</h3>
    <h3 style="margin: 0 0 0 130px">席别</h3>
    <h3 style="margin: 0 0 0 140px">姓名</h3>
    <h3 style="margin: 0 0 0 110px">证件号码	</h3>
    <h3 style="margin: 0 0 0 110px">手机号</h3>
  </div>
  <div style="width: 1000px;margin: 0 auto;background-color: #e9fff1;display: flex;border: 1px solid #5199FD;border-top:none " v-for="(person,index) in checkList">
    <h3 style="margin: 20px;margin-top: 10px">{{ index+1 }}</h3>
    <el-input v-model="person.personFlag" :disabled="true" style="width: 150px;margin-right: 20px"></el-input>
    <el-select v-model="person.personSit" placeholder="请选择" style="width: 150px;margin-right: 20px">
      <el-option
        key="0"
        label="一等座"
        value="0">
      </el-option>
      <el-option
        key="1"
        label="二等座"
        value="1">
      </el-option>
      <el-option
        key="2"
        label="无座"
        value="2">
      </el-option>
    </el-select>
    <el-input v-model="person.personName" :disabled="true" style="width: 150px;margin-right: 20px"></el-input>
    <el-input v-model="person.personCard.slice(0, 4) + '****' + person.personCard.slice(-3)" :disabled="true" style="width: 150px;margin-right: 20px"></el-input>
    <el-input v-model="person.personTel.slice(0, 3) + '****' + person.personTel.slice(-4)" :disabled="true" style="width: 150px;margin-right: 20px"></el-input>
  </div>

  <div style="width: 1000px;margin: 0 auto;">
    <img src="../img/tickets1.png" width="1000">
    <el-button style="background-color: rgb(242,241,241)" @click="backbefore">上一步</el-button>
    <el-button style="background-color: rgb(243,135,50)" @click="submitOrder">提交订单</el-button>
    <img src="../img/tickets2.png" width="1000">
  </div>




  <el-dialog
    title="添加乘车人"
    :visible="showModal"
    @close="showModal = false"
    width="50%">
    <el-form ref="addPassengerForm" label-width="100px" :model="passenger" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="passenger.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber"> <!-- 添加 prop 属性 -->
        <el-input v-model="passenger.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard"> <!-- 添加 prop 属性 -->
        <el-input v-model="passenger.idCard"></el-input>
      </el-form-item>
      <el-form-item label="乘客类型" prop="passengerType">
        <el-select v-model="passenger.passengerType">
          <el-option label="成人" value="成人"></el-option>
          <el-option label="学生" value="学生"></el-option>
          <el-option label="儿童" value="儿童"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>


</div>
</template>

<script>
import Tou from "./tou.vue";
import Second from "./second.vue";

export default {
  name: "tickets",
  components: {Second, Tou},

  data() {
    return {
      tableData: {
        carEndaddr: "运城北",
        carEndtime: "2023-11-11 09:57:00",
        carFirst: 200,
        carId: 18,
        carInfo: "正在候车",
        carName: "D2572",
        carNo: 100,
        carPrice: 110,
        carSec: 300,
        carStartaddr: "西安北",
        carStarttime: "2023-11-11 08:51:00",
        first: "有",
        lasted: "1小时6分钟",
        no: "有",
        second: "有",
      },
      checkList: [],
      personList:[

      ],
      checkPerson:[],
      showModal: false, // 控制模态框显示/隐藏
      passenger: {
        name: '',         // 乘车人姓名
        phoneNumber: '',  // 手机号
        idCard: '',       // 身份证号
        passengerType: '成人', // 默认成人
      },
      rules: {
        phoneNumber:[{
          required: true, message: '手机号不能为空', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur'
        }],
        idCard:[{
          required: true, message: '身份证号不能为空', trigger: 'blur' }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入有效的身份证号', trigger: 'blur'
        }],
      },
      //传选中的乘车人
      checkedList: [], // 用于存储选中的乘车人

    }
  },
  methods:{
    resetForm() {
      this.$refs.addPassengerForm.resetFields();
    },
    submitOrder(){
      // 构建包含选中乘车人信息的数据对象
      const selectedPersons = this.checkList.map(person => {
        if (person.personFlag==='成人'){
          person.personFlag=0;
        }else if (person.personFlag==='学生'){
          person.personFlag=1;
        }else if (person.personFlag==='儿童'){
          person.personFlag=2;
        }
          // 这里可以根据需要从person对象中提取所需的信息
          return {
            personName: person.personName,
            personCard: person.personCard,
            personTel: person.personTel,
            personFlag: person.personFlag,
            seatInfo:person.personSit,
          };
      });
      const dataToSend = {
        personList: selectedPersons, // 选中的乘车人
        carName: this.tableData.carName, // 车次信息
      };
      console.log(dataToSend)
      this.$axios.post('/ticket/send',dataToSend)
        .then(res=>{
          if (res.data.code==200){
            this.$router.push('/order')
          }
        })
    },
    backbefore(){
      this.$router.go(-1)
    },
    openModal() {
      this.showModal = true;
    },
    submitForm() {
      this.$refs.addPassengerForm.validate((valid) => {
        console.log('Validation Callback Triggered. Valid:', valid);
        if (valid) {
          // 在这里执行表单提交的操作
          console.log('乘车人信息：', this.passenger);
          if (this.passenger.passengerType === '成人') {
            this.passenger.passengerType = 0;
          } else if (this.passenger.passengerType === '学生') {
            this.passenger.passengerType = 1;
          } else if (this.passenger.passengerType === '儿童') {
            this.passenger.passengerType = 2;
          }
          this.$axios.get('/user/user')
            .then(res => {
              var user = res.data.data;
              this.$axios.get('/person/insert', {
                params: {
                  // 可以将信息提交到后端或其他处理
                  userId: user.userId,
                  personName: this.passenger.name,
                  personCard: this.passenger.idCard,
                  personTel: this.passenger.phoneNumber,
                  personFlag: this.passenger.passengerType,
                }
              })
                .then(res => {
                  console.log(res.data.code)
                  if (res.data.code == 200) {
                    // 清空表单
                    this.passenger.name = '';
                    this.passenger.phoneNumber = '';
                    this.passenger.idCard = '';
                    this.passenger.passengerType = '成人'; // 重置乘客类型为成人
                    this.showModal = false; // 关闭模态框
                    location.reload();
                  }
                })
            })
        }
      });
    },
    findPersonList(){
      this.$axios.get('/user/user')
        .then(res=>{
          var user=res.data.data;
          this.$axios.get('/person/findAllPerson',{
            params:{
              userId:user.userId
            }
          }).then(res=>{
              this.personList = res.data.data;
              this.personList.forEach(e=>{
                if (e.personFlag==0){
                  e.personFlag='成人'
                  console.log(this.personList)
                }else if (e.personFlag==1){
                  e.personFlag='学生'
                }else if(e.personFlag==2){
                  e.personFlag='儿童'
                }
              })
            })
        })
    }
  },
  mounted() {
    // 使用 this.$route.query.rowData 来获取通过路由传递的参数
    this.findPersonList();
    this.tableData = JSON.parse(this.$route.query.rowData);
  },
}
</script>

<style scoped>

</style>
